<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model</title>
  <script src="vue.js"></script>
</head>
<!--
    收集表单数据：
        若：<input type="text"/>,则v-model收集的是value值，用户输入的就是value值
        若：<input type="radio"/>,则v-model收集的是value值，且要给标签配置value值
        若：<input type="checkbox"/>,
            1.没有配置input的value属性，那么收集的就是checked
            2.配置value属性：
                1.v-model的初始值是非数组，那么收集的就是checked
                2.v-model的初始值是数组，那么收集的就是value组成的数组
        备注：v-model的三个修饰符：
            lazy：失去焦点再收集数据
            number：输入字符串转为有效数字
            trim：输入首尾空格过滤

-->
<body>
<div id="root">
  <form action="" method="get" @submit.prevent="demo">
    <label for="input1">账号：</label>
    <input id="input1" v-model.trim="user.account"><br>
    <label for="input2">密码：</label>
    <input type="password" id="input2" v-model="user.password"><br>
    <label for="input3">年龄：</label>
    <input type="number" id="input3" v-model.number="user.age"><br>
    性别：
    男<input type="radio" name="sex" value="男" v-model="user.sex">
    女<input type="radio" name="sex" value="女" v-model="user.sex"><br>
    爱好：
    学习<input type="checkbox" name="hobby" v-model="user.hobby" value="学习">
    吃饭<input type="checkbox" name="hobby" v-model="user.hobby" value="吃饭">
    游戏<input type="checkbox" name="hobby" v-model="user.hobby" value="游戏"><br>
    校区：
    <select v-model="user.address">
      <option value=>please select</option>
      <option value="北京">北京</option>
      <option value="济南">济南</option>
    </select><br><br>
    其他信息：
    <textarea v-model.lazy="user.other">
    </textarea><br>
    <input type="checkbox" v-model="user.agree" >阅读并接受<a href="http://baidu.com">《用户协议》</a><br>
    <button type="submit">提交</button>
  </form>

</div>
</body>
<script type="text/javascript">
  const vm = new Vue({
    el:"#root",
    data:{
      user:{account:'',
      password:'',
      sex:'',
        age:0,
      hobby:[],
      address:'',
      other:'',
      agree:''}

    },
    methods:{
      demo(){
        alert(JSON.stringify(this.user))
      }
    }

  })


</script>
</html>